import React from "react";
import {Form,Input,Button, Toast} from "antd-mobile";
import { regs } from "../apis/login";

export default class Register extends React.Component{
    state={
        username:"",
        userpwd:" ",
        userpwd2:" ",
        
    }
    render(){
        let {username,userpwd} = this.state
        return(
         <>
           <Form>
               <Form.Item name="name" rules={[{validator:this.checkMobile}]}>
                   <Input placeholder="账号" value={username} onChange={this.changename} ></Input>
               </Form.Item>
               <Form.Item name="pwd"  rules={[{validator:this.checkMobilepwd}]}>
                   <Input placeholder="密码" type="password" onChange={this.changepwd}></Input>
               </Form.Item>
               <Form.Item name="pwd2" rules={[{validator:this.checkMobilepwd2}]}>
                   <Input placeholder="确认密码" type="password" onChange={this.changepwd2}></Input>
               </Form.Item>
               <Button block color='primary' size="large" onClick={this.loginChange} >提交</Button>
           </Form>
         </>
        )
    }
    changename=(e)=>{
        this.setState({
            username:e
        })
        // console.log(this.state.username);
    }
    changepwd=(e)=>{
        this.setState({
            userpwd:e
        })
    }
    changepwd2=(e)=>{
        this.setState({
            userpwd2:e
        })
    }
    checkMobile=()=>{
        // console.log(this.state.username);
        if (this.state.username) {
            if (this.state.username.length>=3 && this.state.username.length<=6) {
                return Promise.resolve()
            } else if(this.state.username.length<3 || this.state.username.length>6){
                return Promise.reject(new Error("请输入3-6位！"))
            } 
        }
        else {
            return Promise.reject(new Error("账号不能为空"))
        }
        // return Promise.reject(new Error("账号不能为空！"))
    }

    checkMobilepwd=()=>{
        let regex="^[0-9]{6,16}$";
        if (this.state.userpwd) {
            // if (this.state.userpwd.length>=6 && this.state.userpwd.length<=12) {
            //     return Promise.resolve()
            // } else{
                //     return Promise.reject(new Error("输入密码为6-12字符"))
                // }
            if (this.state.userpwd.match(regex)) {
                return Promise.resolve()
            } else{
                return Promise.reject(new Error("输入必须有数字和字母，且长度大于等于6!"))
            }
        }else{
            return Promise.reject(new Error("密码不能为空"))
        }
    }
    checkMobilepwd2=()=>{
        // console.log(this.state.userpwd);
        if (this.state.userpwd2==this.state.userpwd) {
            return Promise.resolve()
        } else{
            return Promise.reject(new Error("确认密码与输入密码必须相同"))
        }
    }

    loginChange = async() => {
        let res = await regs({
            acc:this.state.username,
            pwd:this.state.userpwd
        })
        console.log(res);
        if(res.data.code == 1) {
            window.location.href='/'
            Toast.show({
                icon: 'success',
                content: '注册成功',
            })
        }else {
            Toast.show({
                icon: 'fail',
                content: '注册失败',
            })
        }
    }
}